<template>
  <div class="tab-container">
    <div v-for="(item, index) in tab" :key="index">
      <div
        :class="{ active: current == index ? true : false }"
        @click="onChange(index)"
      >
        <keep-alive>
          <router-link :to="item.path">{{ item.name }}</router-link>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["tab"],
  data() {
    return {
      current: this.$store.state.user.current,
    };
  },
  methods: {
    onChange(d) {
      this.current = d;
      this.$store.commit("SET_CURRENT", d);
    },
  },
};
</script>

<style scoped>
.tab-container {
  display: flex;
}
.tab-container > div {
  box-sizing: border-box;
  font-size: 17px;
  border-bottom: 1px solid #f3f7ff;
  cursor: pointer;
}

.tab-container div > div.active a {
  box-sizing: border-box;
  background-color: #f2f5fc;
  color: #7030a0;
  border-top: 3px solid #7030a0;
}
.tab-container div > div a {
  text-decoration-line: none;
  border-top: 3px solid #ffffff;
  padding: 5px 30px;
  display: block;
  color: #333;
  font-style: normal;
}
</style>